<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/exercise' }">任务管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/exercise/dateliExercise">任务详情</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-skeleton :rows="6" :loading="loading" animated>
      <!-- 查看任务 -->
      <div v-if="IsChack == 0" class="dateliTask">
        <el-descriptions class="margin-top" title="任务详情" :column="3" border>
          <template #extra>
            <el-button @click="Taskupdata" type="primary">修改</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">任务数量</div>
            </template>
            <el-tag>
              {{ Count }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">任务标签</div>
            </template>
            <el-tag>
              {{ label }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">任务组织</div>
            </template>
            <el-tag>
              {{ orgname }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">开始时间</div>
            </template>
            <el-tag>
              {{ begintime }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">结束时间</div>
            </template>
            <el-tag>
              {{ endtime }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 查看任务 -->
      <!-- 修改任务 -->
      <div v-if="IsChack == 1" class="dateliTask">
        <el-descriptions class="margin-top" title="任务详情" :column="3" border>
          <template #extra>
            <el-button @click="Tsave" type="primary">保存</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">任务数量</div>
            </template>
            <el-input v-model="Count" placeholder="Please input" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">安排类型</div>
            </template>
            <el-select v-model="label" placeholder="安排类型">
              <el-option label=".Net" value=".Net" />
              <el-option label="Java" value="Java" />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">任务组织</div>
            </template>
            <el-input v-model="orgname" disabled placeholder="Please input" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">开始时间</div>
            </template>
            <el-date-picker v-model="begintime" type="datetime" placeholder="开始时间" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">结束时间</div>
            </template>
            <el-date-picker v-model="endtime" type="datetime" placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-skeleton>
    <!-- 修改任务 -->

    <!-- <div class="Task">
      <strong>任务内容</strong>
      <el-button plain type="primary" @click="replace" style="float: right">替换题目</el-button>
      <div class="drawer">
        <el-scrollbar height="400px">
          <div v-for="item in questions" :key="item.id" class="demo-collapse">
            <el-tag>{{ item.label }}</el-tag>
            <el-collapse v-model="activeName" :accordion="true">
              <el-checkbox v-model="checked[index]" size="large" />
              <el-collapse-item :title="item.name" :name="item.id">
                <template v-for="(item3, index) in item.chilren" :key="index">
                  <div v-if="item3.IsRigh == 1">
                    <span>正确答案：{{ item3.option }}</span>
                  </div>
                </template>
                <el-collapse accordion v-for="(item2, index) in item.chilren" :key="item2.index">
                  <div>
                    <span>{{ index + 1 + " . " + item2.option }}</span>
                  </div>
                </el-collapse>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-scrollbar>
      </div>
    </div> -->
    <!-- 替换题目 -->
    <!-- <el-drawer v-model="drawer" direction="rtl" size="30%">
      <strong style="font-size: 25px">替换题目</strong>
      <div style="float: right; padding-right: 15px">
        <el-button @click="replacesave">保存</el-button>
      </div>
      <div class="describe">
        <el-scrollbar height="600px">
          <el-scrollbar height="600px">
            <div v-for="(item, index) in replacequestions" :key="item.id" class="demo-collapse">
              <el-tag>{{ item.label }}</el-tag>
              <el-collapse v-model="activeName2" :accordion="true">
                <el-checkbox v-model="tchecked[index]" size="large" />
                <el-collapse-item :title="item.name" :name="item.id">
                  <template v-for="(item3, index) in item.chilren" :key="index">
                    <div v-if="item3.IsRigh == 1">
                      <span>正确答案：{{ item3.option }}</span>
                    </div>
                  </template>
                  <el-collapse accordion v-for="(item2, index) in item.chilren" :key="item2.index">
                    <div>
                      <span>{{ index + 1 + " . " + item2.option }}</span>
                    </div>
                  </el-collapse>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-scrollbar>
        </el-scrollbar>
      </div>
    </el-drawer> -->
    <!-- 替换题目 -->
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { DateliExercuse } from "@/utils/Exam/exercise/dateliexercuse";
import { Task } from "@/api/Product/exaam";
import router from "@/router";
import { ElMessage } from "element-plus";

const _exam = new Task();

export default defineComponent({
  setup() {
    const data = reactive<DateliExercuse>({
      Count: 0,
      label: "",
      orgname: "",
      begintime: "",
      endtime: "",
      TaskCompletion: 30,
      IsChack: 0,
      checked: [],
      tchecked: [],
      activeName: "",
      activeName2: "",
      drawer: false,
      VLoading: false,
      loading: true,
      tid: "",
    });
    const methods = {
      GetEohcTask() {
        let dto = {
          tid: data.tid
        }
        _exam.UpdateEchoTask(dto).then((res: any) => {
          if (res.code === 0) {
            data.loading = false;
            data.Count = res.data.tcount,
              data.label = res.data.tlabels,
              data.orgname = res.data.torgname,
              data.begintime = (res.data.tbeginTime).toString(),
              data.endtime = (res.data.tendTime).toString()
          }
        })
      },
      Taskupdata() {
        data.IsChack = 1;
      },
      Tsave() {
        let dto = {
          tid: data.tid,
          tcount: data.Count,
          tlabels: data.label,
          tbeginTime: data.begintime.replace(' ', 'T'),
          tendTime: data.endtime.replace(' ', 'T')
        }
        _exam.UpdateTask(dto).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            router.push("/exercise");
          } else {
            ElMessage.error(res.message)
          }
        })
      },
      replace() {
        data.drawer = true;
      },
      replacesave() {
        data.drawer = false;
      },
    };
    onMounted(() => {

      data.tid = (router.currentRoute.value.params.id).toString();
      methods.GetEohcTask();
    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.dateliTask {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.Task {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.drawer {
  width: 94%;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
</style>
